<template>
  <a-card :style="{height:'200px'}">
    <a style="float:right" @click="loadMore('/extbpm/process/BpmAutoDesformApply')">更多</a>
    <!--展示头部导航信息-->
    <div style="margin-top: 40px" >
      <template v-for="(des,index) of commUseList">
        <a-col :span="4" :key="index">
          <span class="headicon" @click="handleOk(des)">
            <a-button type="primary" shape="circle" :icon="des.desformIcon" size="large" :style="{background:colorList[index],border:0}"/>
            <span style="margin-top: 15px;cursor: pointer"> {{des.desformName.length>4?des.desformName.substr(0,4):des.desformName}}</span>
          </span>
        </a-col>
      </template>
    </div>
    <auto-desform-data-modal ref="desformModal" :dialogOptions="dialogOptions"  @added="handleDesformDataAdded"></auto-desform-data-modal>
  </a-card>
</template>

<script>
  import { getAction,httpAction } from '@/api/manage'
  import AutoDesformDataModal from '../../../extbpm/process/modules/AutoDesformDataModal'

  const colorList = ['#F14A2D', '#0079DE', '#217346', '#F14A2D', '#6D3CF7', '#0079DE']
  export default {
    name: 'EoaCmsCommUse',
    components: {
      AutoDesformDataModal,
    },
    data () {
      return {
        flowCodePre: 'desform_',
        commUseList: [],
        colorList,
        dialogOptions: { top: 60, width: 1000, padding: { top: 25, right: 25, bottom: 30, left: 25 } },
        url: {
          // date:20220115 author:scott for:JTC-1113 【流程门户】 对着常用流程发起工单并没有发起流程，流程数据找不到了
          addFormflow: '/act/process/extActDesignFlowData/add',
        }
      }
    },
    created() {
      //常用
      this.loadCommUseList()
    },
    methods: {
      loadCommUseList() {
        getAction("/joa/designform/designFormCommuse/getCommuseByUserId",{}).then((res) =>{
          if (res.success) {
            let data=res.result
            if(data.length >6){
              this.commUseList = data.slice(0,6)
            }else{
              this.commUseList = data
            }
          }
        });
      },
      handleOkBpmSelect(desform) {
        var title = "表单【"+desform.desformName+"】发起申请";
        this.openDesformModal('add', desform, title)
      },
      openDesformModal(mode, record, title) {
        let desform = record, dataId = null
        if (mode === 'edit' || mode === 'detail') {
          let { desformId: id, desformCode, desformDataId } = record
          dataId = desformDataId
          desform = { id, desformCode }
        }
        getAction( '/desform/queryByCode', {
          desformCode: desform.desformCode
        }).then(res => {
          if (res.success) {
            let designJson = res.result.desformDesignJson;
            let json = JSON.parse(designJson)
            // 保存 dialogConfig
            let dialogOptions = json.config.dialogOptions
            if (dialogOptions) {
              this.dialogOptions = dialogOptions
            }
            this.$refs.desformModal.open(mode, desform, dataId, title)
          }

        })

      },
      handleDesformDataAdded(event) {
        // 将流程保存至后台
        let { desform, dataId } = event
        this.loading = true
        httpAction(this.url.addFormflow, {
          desformId: desform.id,
          desformCode: desform.desformCode,
          desformDataId: dataId,
          desformName: desform.desformName,
          processName: desform.procName,
          flowCode: this.flowCodePre + desform.desformCode,
          titleExp: desform.titleExp
        }, 'POST').then(res => {
          if (!res.success) {
            this.$message.error(res.message)
            return
          }
          this.$router.push({ path: '/extbpm/process/ExtActDesignFlowDataList'})
        }).finally(() => this.loading = false)
      },
      /** bmp 选择 ok */
      handleOk(value) {
        if (value) this.current = value
        this.handleOkBpmSelect(this.current);
      },
      loadMore(path){
        let query={}
        this.$router.push({ path: path,query:query})
      },
    }
  }
</script>

<style scoped>

</style>